<style scoped>
    body {
        min-height: 1084px;
    }

    .car_search .bill_searchBox {
        padding: 0 30px;
        margin-bottom: 50px;
    }

    .car_search .success {
        font-size: 16px;
        color: white;
        height: 34px;
        padding-right: 0;
        margin-right: 0;

    }

    .car_search .xinzeng {
        height: 50px;
        box-sizing: border-box;
        font-size: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid #D9D9D9;
        margin-bottom: 10px;
    }

    .car_search .xinzeng::after {
        content: "";
        display: block;
        clear: both;
    }

    .car_search .all {
        /* display: inline-block; */
        vertical-align: middle;
        font-size: 16px;
        color: #ef8412;
        font-weight: normal;
        margin-bottom: 20px;
    }

    .car_search .newadd {
        display: inline-block;
        vertical-align: bottom;
        float: right;
        right: 0;
        text-align: right;
    }

    /*
    *footer
    */

    .car_search #footer {
        /* padding: 0 15px 0 0px; */
        padding: 0 30px;
        height: 80px;
        line-height: normal;
        position: fixed;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: #FFF;
        box-shadow: -1px -3px 2px #E3E3E3;
        margin-right: 15px;
        right: 0;
    }

    .car_search #footer .page {
        height: 36px;
        padding-right: 0;
        margin-right: 0;
    }

    .car_search #footer .page .ivu-page-options {
        height: 36px !important;
    }

    .car_search #footer .page .ivu-page-options .ivu-page-options-sizer {
        height: 36px;
    }

    .car_search .mb10 {
        margin-bottom: 10px;
    }

    .pro-pagesize {
        margin-bottom: 10px;

    }

    .car_search .left {
        display: inline-block;
        float: left;
        font-size: 18px;
        color: #ef8412;
        font-weight: normal;
    }

    .car_search .right {
        display: inline-block;
        float: right;
        border-radius: 2px;
        font-size: 16px;
        color: white;
    }

    .car_search .cas .ivu-form-item {
        /* padding-right: 0px; */
    }

    .iconfont {
        font-size: 14px;
    }

    @media (max-width: 1200px) {
        .car_search .cas .ivu-form-item {
            padding-right: 30px !important;
        }
    }
</style>
<style>
    .car_search .sass .ivu-form-item-label {
        height: 36px;
    }

    .car_search .ivu-row {
        margin-bottom: 20px !important;
    }

    .car_search .ivu-table-cell .jiao+span {
        font-size: 12px;
    }

    .car_search .ivu-table-cell .shang+span {
        font-size: 12px;
    }

    .car_search .shang {
        color: #fff;
        padding: 2px;
        margin-right: 5px;
        border-radius: 3px;
        background-color: #36c560;
    }

    .car_search .jiao {
        color: #fff;
        padding: 2px;
        margin-right: 5px;
        border-radius: 3px;
        background-color: #ea9405;
    }

    .car_search th,
    td {
        text-align: center;
    }

    .car_search .right .ivu-btn i {
        vertical-align: middle;
        font-size: 16px;
    }

    .car_search .ivu-form-item {
        margin-bottom: 18px;
    }
</style>
<template>
    <div class="car_search">
        <product-title></product-title>
        <div class="bill_searchBox">
            <Row class="xinzeng">
                <div class="left">
                    快速搜索
                </div>
                <!-- <div class="right">
                          <Button type="success" @click="routerPush"  icon="icon iconfont  icon-weibiaoti3 f1" style="width:99px;height:36px;color:white;font-size:14px;border-radius:2px;">
                              新增
                          </Button>
                    </div> -->
            </Row>
            <div class="common-box-body">
                <Form ref="formItem" :model="formItem">
                    <Row>
                            <i-col :md="24" :lg="8" class="sass" style="padding-right:15px;">
                                <FormItem label="保险公司" >
                                    <i-select v-model="formItem.cname" >
                                        <Option value="">全选</Option>
                                        <Option value="安诚财险">安诚财险</Option>
                                        <Option value="华农财险">华农财险</Option>
                                        <Option value="富德财险">富德财险</Option>
                                        <Option value="诚泰财险">诚泰财险</Option>
                                    </i-select>
                                 </FormItem>
                            </i-col>
                            <i-col :md="24" :lg="8" class="sass" style="padding-right:15px;">
                                <FormItem label="车牌号" prop='car_code'>
                                    <i-input v-model="formItem.car_code" placeholder="请输入" ref="inp"></i-input>
                                </FormItem>
                            </i-col>
                            <i-col :md="24" :lg="8" class="sass" style="padding-right:15px;">
                                <FormItem label="业务员" prop='business_name'>
                                    <i-input v-model="formItem.business_name" placeholder="请输入"></i-input>
                                </FormItem>
                            </i-col>
                            <i-col :md="24" :lg="8" class="sass" style="padding-right:15px;">
                                <FormItem label="被保险人" prop='ensured_name'>
                                    <i-input v-model="formItem.ensured_name" placeholder="请输入"></i-input>
                                </FormItem>
                            </i-col>
                        
                            
                            <i-col :md="24" :lg="8" class="sass" style="padding-right:15px;">
                                <FormItem label="保单类型" prop='insurance_type'>
                                    <i-select v-model="formItem.insurance_type" @on-change='changeseen'>
                                        <Option value="">不选</Option>
                                        <Option value="1">交强险</Option>
                                        <Option value="2">商业险</Option>
                                    </i-select>
                                </FormItem>
                            </i-col>
                            <i-col :md="24" :lg="8" class="sass" style="padding-right:15px;" v-show='seen'>
                                <FormItem label="投保单号" prop='insurance_num'>
                                    <i-input v-model="formItem.insurance_num" placeholder="请输入"></i-input>
                                </FormItem>
                            </i-col>


                            <i-col :md="8" :lg="8" class="sass" style="padding-right:15px;">
                                <FormItem label="保单日期类型选择">
                                    <i-select v-model="formItem.time_type" @on-change='changeseen1'>
                                        <Option value="">不选</Option>
                                        <Option value="1">保单录入时间</Option>
                                        <Option value="2">保单核保时间</Option>
                                    </i-select>
                                </FormItem>
                            </i-col>
                            <!-- <i-col :md="16" :lg="16"> -->
                                <i-col  :md="24" :lg="8"   v-if="seen1" class="sass" style="padding-right:15px;">
                                    <FormItem label="保单录入开始时间" prop='begin_timeall'>
                                        <DatePicker type="date" placeholder="请选择保单录入时间" :transfer="true" @on-change="datachange($event,formItem,'begin_time')" v-model="formItem.begin_timeall"></DatePicker>
                                    </FormItem>
                                </i-col>
                                <i-col  :md="24" :lg="8"  class="cas sass"  v-if="seen1" style="padding-right:15px;">
                                    <FormItem label="保单录入结束时间" prop='end_timeall'>
                                        <DatePicker type="date" placeholder="请输入保单核保时间" :transfer="true" @on-change="datachange($event,formItem,'end_time')" v-model="formItem.end_timeall"></DatePicker>
                                    </FormItem>
                                </i-col>
                            <!-- </i-col> -->
                            <!-- <i-col :md="16" :lg="16" > -->
                                <i-col :md="24" :lg="8"  v-if="seen2" class="sass" style="padding-right:15px;">
                                    <FormItem label="保单核保开始时间" prop='begin_timeall'>
                                        <DatePicker type="date" placeholder="请选择保单录入时间" :transfer="true" @on-change="datachange($event,formItem,'begin_time')" v-model="formItem.begin_timeall"></DatePicker>
                                    </FormItem>
                                </i-col>
                                <i-col :md="24" :lg="8"  class="sass" v-if="seen2" style="padding-right:15px;">
                                    <FormItem label="保单核保结束时间" prop='end_timeall'>
                                        <DatePicker type="date" placeholder="请输入保单核保时间" :transfer="true" @on-change="datachange($event,formItem,'end_time')" v-model="formItem.end_timeall"></DatePicker>
                                    </FormItem>
                                </i-col>
                            <!-- </i-col> -->
                            <i-col :md="8" :lg="8" class="sass" style="padding-right:15px;">
                                <FormItem label="保单状态查询">
                                    <i-select v-model="formItem.status" >
                                        <Option value="">不选</Option>
                                        <Option value="已承保">已承保</Option>
                                        <Option value="已提交">已提交</Option>
                                        <Option value="已核保待付款">已核保待付款</Option>
                                        <Option value="已付款未生成保单">已付款未生成保单</Option>
                                        <Option value="已登记未付款">已登记未付款</Option>
                                        <Option value="已付款未确认到账6">已付款未确认到账</Option>
                                        <Option value="已过缴费期">已过缴费期</Option>
                                        <Option value="暂存">暂存</Option>
                                        <Option value="退回修改">退回修改</Option>
                                        <Option value="撤单修改">撤单修改</Option>
                                    </i-select>
                                </FormItem>
                            </i-col>           
                    </Row>
                    <Row :md="24" :lg="24">
                        <!-- <i-col :md="24" :lg="2" style="color: #2FB7F5;cursor: pointer;">
                              <div @click="moreChange">
                                  <Icon type="arrow-up-b" v-if="moreshow"></Icon>
                                  <Icon type="arrow-down-b" v-else></Icon>
                                  更多查询条件
                              </div>
                          </i-col> -->
                        <i-col :md="24" :lg="{span:6,offset:18}">
                            <i-button @click="reset" size="large" icon="refresh" class="fr" style="border-radius:2px;background-color:#77b4f5;color:#FFFFFF;width:99px;height:36px;font-size:14px;">重置</i-button>
                            <i-button @click="search" size="large" type="info" class="fr" icon="ios-search" style="border-radius:2px;float:right;color:#FFFFFF;margin-right:15px;width:99px;height:36px;font-size:14px;">搜索</i-button>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <!-- <div style="padding:20px; border-top:1px dotted #EDEDED;">
                    共{{total}}条&emsp;&emsp;总保费：0元&emsp;&emsp;净保费：0元&emsp;&emsp;车船税：0元
                </div> -->
            <i-table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe
                highlight-row border :columns="column1" :data="data1"></i-table>


        </div>
        <div id='footer'>
            <Row class="pro-pagesize">
                <Col :md="24" :lg="10">
                <!-- <Button class="fl mr10 " :disabled="tableaction" type="error" size="large"    @click="remove">删除</Button> -->
                <Button class="fl mr10 " :disabled="tableaction" type="primary" @click='detail' size="large">编辑</Button>
                <!-- <Button class="fl mr10 " :disabled="tableaction" type="success" size="large"  >证件上传</Button> -->
                </Col>
                <Col :md="24" :lg="14" class="tRight">
                <Page ref="pages" class="page" :page-size="pagesize" show-sizer show-total :total="total" @on-page-size-change="pageSizeChange"
                    @on-change="pageChange" placement="top"></Page>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    import productTitle from "../../components/productTitle.vue";
    import {
        car_insurance_list
    } from "../../api/newcar.js";
    export default {
        data() {
            return {
                seen1: true,
                seen2: false,
                seen: true,
                tableaction: true,
                tableloading: false,
                current: {
                    id: "",
                    status: 1,
                    name: ""
                },
                moreshow: true,
                formItem: {
                    car_code: '', //车牌号码
                    begin_time: "", //开始录入时间
                    end_time: "", //保单核保时间
                    business_name: '', //业务员
                    time_type: "1", //日期类型
                    ensured_name: "", //被保险人
                    com_name:"",//保险公司
                    insurance_type: "1", //保单类型
                    insurance_num: "", //投保单号
                    status:"",//保单状态查询

                    // makeComName: "华农财产保险股份有限公司西华支公司",
                    pagesize: 10,
                    p: 1,
                },
                column1: [
                    // {
                    //     key: "proposal_no",
                    //     title: "交强险保单号",
                    //     align: 'center'
                    // },
                    // {
                    //     key: "commercial_proposal_no",
                    //     title: "商业险保单号",
                    //     align: 'center'
                    // },
                    {
                        key: "ProposalNo",
                        title: "保单号",
                        render: (h, params) => {
                            return h("div", [
                                h("div"), [
                                    h(
                                        "span", {
                                            class: {
                                                    jiao: params.row.traffic_str == "交" ? "jiao" : ""
                                            }
                                        },
                                        params.row.traffic_str
                                    ),
                                    h(
                                        "span", {
                                        },
                                        params.row.proposal_no
                                    ),
                                ],
                                h("div"), [
                                h(
                                        "span", {
                                            class: {
                                                shang: params.row.commercial_str == "商" ? "shang" : "",
                                            }
                                        },
                                        params.row.commercial_str
                                    ),
                                    h(
                                        "span", {
                                        },
                                        params.row.commercial_proposal_no
                                    ),
                                ],
                            ]);
                        }
                    },
                    {
                        key: "car_code",
                        title: "车牌号码",
                        align: 'center'
                    },
                    {
                        key: "ensured_name",
                        title: "被保险人姓名",
                        align: 'center'
                    },
                    {
                        key: "business_name",
                        title: "业务员",
                        align: 'center'
                    },
                    {
                        key: "enter_date",
                        title: "保单录入时间",
                        align: 'center'
                    },
                    {
                        key: "check_date",
                        title: "保单核保时间",
                        align: 'center'
                    },
                    {
                        key: "status",
                        title: "保单状态",
                        align: 'center'
                    }
                ],
                data1: [],
                total: 0,
                p: 1,
                pagesize: 10
            };
        },
        components: {
            productTitle
        },
        mounted() {
            this.$nextTick(function () {
                document.getElementById('footer').style.width = getComputedStyle(document.getElementsByClassName(
                    'car_search')[0]).width;
            })
        },
        created() {
            this.get_list();
        },
        methods: {

            get_list(id) {
                new Promise((resolve, reject) => {
                    car_insurance_list(this.formItem).then(response => {
                        if (response.data.err == 0) {
                            this.data1 = response.data.data.data;
                            this.total = response.data.data.total;
                            this.tableloading = false;
                            if (id == -1) {
                                this.$refs.pages.currentPage = 1
                            }
                        } else {
                            this.data1 = [];
                            this.total = 0;
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            // 点击编辑进入详情
            detail() {
                this.$router.push({
                    name: 'car_detail',
                    params: {
                        id: this.current._id
                    }
                })
            },
            pageSizeChange(value) {
                this.pagesize = value
                this.formItem.pagesize = value;
                this.get_list();
            },
            pageChange(value) {
                this.p = value;
                this.formItem.p = value;
                this.get_list();
            },
            //时间转换
            datachange(date, obj, param) {
                obj[param] = date;
                console.log(obj[param], "当前点击的是哪个日期")
            },
            // 点击保单类型 投保单号可以显示
            changeseen(value) {
                console.log(value)
                if (value) {
                    this.seen = true
                } else {
                    this.seen = false
                }
            },
            changeseen1(value) {
                console.log(value);
                if (value == 1) {
                    this.seen1 = true;
                    this.seen2 = false;
                } else if (value == 2) {
                    this.seen1 = false;
                    this.seen2 = TextTrackCue;
                } else {
                    this.seen1 = false;
                    this.seen2 = false;
                    this.formItem.begin_timeall = "";
                    this.formItem.end_timeall = ""
                    this.formItem.begin_time = "";
                    this.formItem.end_time = ""
                }

            },
            search() {
                let begin_time = Date.parse(this.formItem.begin_time) / 1000;
                let end_time = Date.parse(this.formItem.end_time) / 1000;
                if (end_time < begin_time) {
                    alert("请注意:保单开始日期应该小于保单结束日期");
                    return
                }
                this.tableloading = true
                this.formItem.p = 1;
                this.get_list(-1);
            },
            reset() {
                this.$refs["formItem"].resetFields();
            },
            startChange(value) {
                this.$nextTick(function () {
                    this.formItem.time_start = value;
                });
            },
            endChange(value) {
                this.$nextTick(function () {
                    this.formItem.time_end = value;
                });
            },
            //选中当前行数据
            tableCurrentChange(currentRow, oldCurrentRow) {

                this.tableaction = false;
                this.current = currentRow;
                console.log(this.current, "具体每条数据详情")
                // this.$set(this.current,'status',currentRow.status  == '上架' ? true : false)
            },
            // 点击删除执行删除选中的table操作
            remove() {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        var _param = {
                            mid: this.current._id
                        }
                        new Promise((resolve, reject) => {
                            car_policy_list(_param).then(response => {
                                if (response.data.err == 0) {
                                    this.$Message.success(response.data.info);
                                    this.getList();
                                } else {
                                    this.$Message.error(response.data.info);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    },
                });

            },
        }
    };
</script>